<template>
    <el-select class="base-select" :value="value?value.toString():value" @input="val=>this.$emit('input',val)"
               :disabled="disabled"
               :popper-class="autoOptionHeight?'option':undefined"
               :size="size"
               @change="handleChange"
               filterable
               :clearable="clearable"
               :placeholder="placeholder">
        <el-option
                v-for="item in options"
                :key="item[val]"
                :label="item[label]"
                :value="item[val]">
            <slot :item="item"></slot>
        </el-option>
    </el-select>
</template>

<script type="text/ecmascript-6">
  /**
   * @author 白雨浓
   * @date 2019/6/28 17:07
   *
   * 基础 选择器
   **/
  export default {
    name: 'BaseSelect',
    props: {
      value: {},
      options: {
        type: Array,
        required: true
      },
      label: {
        type: String,
        default: 'label'
      },
      val: {
        type: String,
        default: 'value'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      autoOptionHeight: {
        type: Boolean,
        default: false
      },
      size: {
        type: String
      },
      clearable: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
      },
      index: {
        type: Number,
      }
    },
    methods: {
      handleChange(val) {
        this.$emit('change', val, this.index);
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .base-select {
        width 100%
    }

    .option {
        li {
            height auto
        }
    }
</style>
